<template>
    <div class="order-box">
      <div style="max-height:180px;overflow-y:auto;overflow-x:hidden;">
        <el-table
          :data="orderData"
          :show-header="false"
          style="width: 100%">
          <el-table-column
            prop="orderNo"
            label="订单编号">
          </el-table-column>
          <el-table-column
            prop="orderName"
            label="订单名称">
          </el-table-column>
          <el-table-column
            prop="orderAmount"
            label="产品总价">
          </el-table-column>
          <el-table-column
            prop="productCount"
            label="订单总数">
          </el-table-column>
          <el-table-column
            prop="orderTime"
            label="订单时间">
          </el-table-column>
        </el-table>
        <el-pagination
          style="margin-top:10px;text-align: center"
          background
          size="mini"
          @current-change="orderPageChange"
          :current-page="orderPage"
          :page-size="5"
          layout="prev, pager, next"
          :total="orderTotal">
        </el-pagination>

      </div>
    </div>
</template>

<script>
    import {custOrder} from '@/api/customer'
    export default {
        name: "aboutOrder",
        props:['id'],
        data() {
            return {
                orderData:[],
                orderPage:1,
                orderTotal:0
            }
        },
        methods:{
            init() {
                custOrder(Number(this.id), this.orderPage, 5).then(res => {
                    if(res.data.success) {
                        this.orderData = res.data.data.records
                        this.orderTotal = res.data.data.total
                    }
                })
            },
            orderPageChange() {
                custOrder(Number(this.id), this.orderPage, 5).then(res => {
                    if(res.data.success) {
                        this.orderData = res.data.data.records
                        this.orderTotal = res.data.data.total
                    }
                })
            }
        }
    }
</script>

<style scoped>
.order-box{
  padding-bottom: 10px;
}
</style>
